<script>
import Tree from '@/components/WrapTree'
import CList from '@/components/List/src/index.vue'
import CListItem from '@/components/List/src/Item.vue'
import { Meta as CListItemMeta } from '@/components/List/src/Item.vue'
import CAvatar from '@/components/Avatar/Avatar.vue'
import ButtonList from '@/components/ButtonList'
import SearchForm from '@/components/SearchForm'
import DialogForm from '@/components/DialogForm'
import Form from '@/components/Form'
import store from './store'
import emitter from '@/mixins/emitter'
import { commonMixin } from '@/mixins/common'

export default {
  name: 'treeList',
  mixins: [store, emitter, commonMixin],
  data() {
    return {
      labelWidth: '80px',
      tableOptWidth: '100',
      tree: {
        width: '280',
        accordion: false,
        isShowHeader: true,
        showCheckbox: false,
        search: {},
        selectTree: {},
        nextNodeKey: 'node',
        idKey: 'funId',
        title: '树表',
        getNextChildNode: this.getNextNode
      },

      idKey: 'funId',
      delIdKey: 'funId',
      delListIdKey: 'funIds',
      nodeIdKey: 'id',
      listItemLayout: 'horizontal',
      btnListWidthPercent: 18,
      searchInputWidthPercent: 6,
      showInputFlag: true,
      inputPlaceholder: '',

      currentNode: null,
      dialogType: '',
      searchFields: [
        {
          label: '功能编号',
          prop: 'funId',
          placeholder: '长度在 3 到 5 个字符',
          anchor: 8
        },
        {
          label: '功能名称',
          prop: 'funName',
          placeholder: '输入功能名称',
          anchor: 8
        },
        {
          label: '功能类型',
          prop: 'funType',
          placeholder: '请选择功能类型',
          xType: 'SelectCode.FUN_TYPE',
          anchor: 8
        },
        {
          label: '连接地址',
          prop: 'location',
          placeholder: '输入连接地址',
          anchor: 8
        }
      ],
      searchModel: {
        funId: '',
        funName: '',
        location: '',
        funType: ''
      },
      searchBtnList: [
        {
          label: '查询',
          methods: 'handleSearch',
          icon: 'el-icon-search',
          type: 'primary',
          disabled: false
        },
        {
          label: '重置',
          methods: 'handleSearchReset',
          icon: 'el-icon-refresh',
          type: 'warning',
          disabled: false
        }
      ],
      toolPanelBtnList: [
        {
          label: '新增',
          methods: 'handleAdd',
          icon: 'el-icon-circle-plus-outline',
          type: 'primary',
          disabled: false
        }
      ],
      ListBtn: [
        {
          label: '编辑',
          methods: 'handleEdit',
          slot: 'actions',
          icon: 'el-icon-edit-outline',
          type: 'primary',
          key: 'edit',
          align: 'top-start',
          disabled: false
        },
        {
          label: '删除',
          methods: 'handleDelete',
          slot: 'actions',
          icon: 'el-icon-delete',
          type: 'danger',
          key: 'delete',
          align: 'top-start',
          disabled: false
        }
      ],
      formPanel: {
        add: {
          model: {
            funId: '',
            funName: '',
            location: '',
            pid: '',
            orderNo: '',
            funType: '',
            logFlag: 1,
            icon: '',
            version: ''
          },
          fields: [
            {
              label: '功能编号',
              prop: 'funId',
              placeholder: '长度在 3 到 5 个字符',
              anchor: 24,
              ref: 'funId',
              focus: true
            },
            {
              label: '功能名称',
              prop: 'funName',
              placeholder: '输入功能名称',
              anchor: 24
            },
            {
              label: '连接地址',
              prop: 'location',
              placeholder: '输入连接地址',
              anchor: 24
            },
            {
              label: '父功能',
              prop: 'pid',
              placeholder: '请选择父功能',
              xType: 'SelectTree.SYS_FUN',
              anchor: 24
            },
            {
              label: '排序号',
              prop: 'orderNo',
              placeholder: '输入排序号',
              anchor: 24
            },
            {
              label: '功能类型',
              prop: 'funType',
              placeholder: '请选择功能类型',
              xType: 'SelectCode.FUN_TYPE',
              anchor: 24
            },
            {
              label: '记日志',
              prop: 'logFlag',
              xType: 'switch',
              anchor: 24,
              'active-value': 1,
              'inactive-value': 0
            },
            { label: '图标', prop: 'icon', anchor: 24 },
            { label: '版本', prop: 'version', anchor: 24 }
          ],
          rules: {
            funId: [
              { required: true, message: '请输入功能编号', trigger: 'blur' }
            ],
            funName: [
              { required: true, message: '请输入功能名称', trigger: 'blur' }
            ],
            funType: [
              { required: true, message: '请选择功能类型', trigger: 'blur' }
            ]
          },
          title: '新增信息',
          type: 'ADD',
          ref: 'addForm',
          submitBtnList: [
            {
              label: '保存并新增',
              methods: 'handleSubmitAndAdd',
              icon: 'el-icon-circle-check-outline',
              type: 'primary',
              disabled: false
            },
            {
              label: '保存',
              methods: 'handleAddSubmit',
              icon: 'el-icon-circle-check-outline',
              type: 'primary',
              disabled: false
            },
            {
              label: '取消',
              methods: 'handleCancel',
              icon: 'el-icon-circle-close-outline',
              disabled: false
            }
          ]
        },
        edit: {
          model: {
            funId: '',
            funName: '',
            location: '',
            pid: null,
            orderNo: '',
            funType: '',
            logFlag: '',
            icon: '',
            version: ''
          },
          fields: [
            {
              label: '功能编号',
              prop: 'funId',
              placeholder: '长度在 3 到 5 个字符',
              anchor: 24,
              disabled: true
            },
            {
              label: '功能名称',
              prop: 'funName',
              placeholder: '输入功能名称',
              anchor: 24,
              focus: true
            },
            {
              label: '连接地址',
              prop: 'location',
              placeholder: '输入连接地址',
              anchor: 24
            },
            {
              label: '父功能',
              prop: 'pid',
              placeholder: '请选择父功能',
              xType: 'SelectTree.SYS_FUN',
              anchor: 24
            },
            {
              label: '排序号',
              prop: 'orderNo',
              placeholder: '输入排序号',
              anchor: 24
            },
            {
              label: '功能类型',
              prop: 'funType',
              placeholder: '请选择功能类型',
              xType: 'SelectCode.FUN_TYPE',
              anchor: 24
            },
            {
              label: '记日志',
              prop: 'logFlag',
              xType: 'switch',
              anchor: 24,
              'active-value': 1,
              'inactive-value': 0
            },
            { label: '图标', prop: 'icon', anchor: 24 },
            { label: '版本', prop: 'version', anchor: 24 }
          ],
          rules: {
            funId: [
              { required: true, message: '请输入功能编号', trigger: 'blur' }
            ],
            funName: [
              { required: true, message: '请输入功能名称', trigger: 'blur' }
            ],
            funType: [
              { required: true, message: '请选择功能类型', trigger: 'blur' }
            ]
          },
          title: '编辑信息',
          type: 'EDIT',
          ref: 'editForm',
          submitBtnList: [
            {
              label: '保存',
              methods: 'handleEditSubmit',
              icon: 'el-icon-circle-check-outline',
              type: 'primary',
              disabled: false
            },
            {
              label: '取消',
              methods: 'handleCancel',
              icon: 'el-icon-circle-close-outline',
              disabled: false
            }
          ]
        },
        look: {
          model: {
            funId: '',
            funName: '',
            location: '',
            pid: '',
            orderNo: '',
            funType: '',
            logFlag: '',
            icon: '',
            version: ''
          },
          fields: [
            {
              label: '功能编号',
              prop: 'funId',
              placeholder: '长度在 3 到 5 个字符',
              anchor: 24,
              disabled: true
            },
            {
              label: '功能名称',
              prop: 'funName',
              placeholder: '输入功能名称',
              anchor: 24,
              disabled: true
            },
            {
              label: '连接地址',
              prop: 'location',
              placeholder: '输入连接地址',
              anchor: 24,
              disabled: true
            },
            {
              label: '父功能',
              prop: 'pid',
              placeholder: '请选择父功能',
              xType: 'SelectTree.SYS_FUN',
              anchor: 24,
              disabled: true
            },
            {
              label: '排序号',
              prop: 'orderNo',
              placeholder: '输入排序号',
              anchor: 24,
              disabled: true
            },
            {
              label: '功能类型',
              prop: 'funType',
              placeholder: '请选择功能类型',
              xType: 'SelectCode.FUN_TYPE',
              anchor: 24,
              disabled: true
            },
            {
              label: '记日志',
              prop: 'logFlag',
              xType: 'switch',
              anchor: 24,
              'active-value': 1,
              'inactive-value': 0,
              disabled: true
            },
            { label: '图标', prop: 'icon', anchor: 24 },
            { label: '版本', prop: 'version', anchor: 24 }
          ],
          rules: {},
          title: '查看信息',
          type: 'LOOK',
          ref: 'lookForm',
          submitBtnList: [
            {
              label: '保存',
              methods: '',
              icon: 'el-icon-circle-check-outline',
              type: 'primary',
              disabled: true
            },
            {
              label: '取消',
              methods: 'handleCancel',
              icon: 'el-icon-circle-close-outline',
              disabled: false
            }
          ]
        }
      }
    }
  },
  computed: {
    data() {
      return this.store.data
    }
  },
  mounted() {
    this.load()
  },
  methods: {
    load(page, limit) {
      this.getData({ page, limit })
    },
    /**
     * 响应页面左侧 tree 组件派发的 tree-import 事件回调
     *  - 当点击 tree 组件的 导入按钮，tree 组件会派发 tree-import 事件
     * */
    handleTreeImport() {},
    /**
     * 响应页面左侧 tree 组件派发的 tree-subSelect 事件回调
     *  - 当 tree 组件包含下拉树 SelectTree 组件时，SelectTree 组件下拉选择会将下拉选择值通过 tree-subSelect 事件派发出去
     *
     * handleTreeSubSelect(val) {
     *   // val 为 SelectTree 组件派发出来的选择的值
     *   // todo...
     * }
     */
    handleTreeSubSelect() {},
    /**
     * 响应页面左侧 tree 组件派发的 tree-empty 事件回调
     *  - 当 tree 组件数据为空会派发 tree-empty 事件
     */
    handleTreeEmpty() {},
    /**
     * 用户可自定义点击左侧树节点后操作
     */
    renderTreeCheckCallback(node) {
      return node
    },
    /**
     * 响应页面左侧 tree 组件派发的 check-treeNode 事件回调
     *  - 当点击 tree 组件的 树节点, 会派发 check-treeNode 事件
     *  - 模板中该方法会执行：
     *    -- 将点击的树节点设置为 currentNode
     *    -- 根据点击的树节点的 唯一标识（如 id）向后台请求该节点分页数据（调用 List 组件 load() 方法），并渲染页面右侧列表 List 组件
     *    -- 执行 renderTreeCheckCallback(), 用户可自定义点击左侧树节点后操作
     */
    handleNodeCheck(node) {
      if (node) {
        this.currentNode = node
        this.store._searchParams = {}
        this.store._searchParams['q_' + this.idKey] = node.data[this.nodeIdKey]
        this.load(1, this.store.limit)
      }
      this.renderTreeCheckCallback(node)
    },
    /**
     * 定义列表 List 组件内部使用的 发送分页请求数据的 方法
     */
    getData({ page, limit }) {
      this.store.read({ start: page, limit: limit })
    },
    /**
     * 点击页面右侧顶部表单 查询按钮 触发
     * - 模板中该方法会执行：
     *   -- 根据页面右侧顶部表单填入内容，处理发送列表分页请求参数
     *   -- 调用列表 List 组件 load() 方法，发送分页数据请求，渲染 List 组件
     */
    handleSearch(data) {
      if (data) {
        for (const k in data) {
          if (data.hasOwnProperty(k)) {
            this.limit['q_' + k] = data[k]
          }
        }
        this.load(1, this.store.limit)
      }
    },
    /**
     * 点击页面右侧顶部表单 重置按钮 触发
     * - 模板中该方法会将右侧顶部表单内容重置
     */
    handleSearchReset() {
      this.$refs.searchForm.onReset()
    },
    /**
     * 点击页面右侧列表顶部 新增按钮 触发
     * - 模板中该方法会执行：
     *   -- 打开 新增列表项信息表单 弹窗
     *   -- 将 新增列表项信息表单 清空
     */
    handleAdd() {
      this.dialogType = this.formPanel.add.type
      this.$nextTick(() => {
        this.$refs.addForm && this.$refs.addForm.resetFields()
      })
    },
    /**
     * 点击页面右侧列表顶部 删除按钮 触发
     * - 模板中该方法会执行：
     *    -- 如果没有勾选的列表项，提示没有要删除的数据，直接返回
     *    -- 否则将勾选的列表项的 唯一标识（如 id）存放入数组
     *    -- 提示操作不能回退，取消则返回，否则将数组作为数据向后台发送删除请求：
     *       ---- 删除请求发送成功，则提示删除成功信息，调用 tree 组件 refresh()，刷新左侧树
     *            删除请求发送失败则提示失败信息
     */
    // handleDelGroup() {
    //   if (this.selectedList.length === 0) {
    //     this.$message({
    //       type: 'info',
    //       message: '没有要删除的数据'
    //     })
    //     return false
    //   }
    //   const funIds = this.selectedList.map((item) => {
    //     return item[this.delIdKey]
    //   }).join(',')
    //   this.$confirm('此操作不能回退，确认要删除您选中的数据么?', '提示', {
    //     cancelButtonText: '取消',
    //     confirmButtonText: '确定',
    //     type: 'warning'
    //   }).then(() => {
    //     const params = {}
    //     params[this.delListIdKey] = funIds
    //     this.delList(params).then(({ success, message }) => {
    //       if (success) {
    //         this.load(1)
    //         this.$message({
    //           type: 'success',
    //           message: message
    //         })
    //         // 删除后 刷新本地 tree
    //         this.$refs.tree.refresh()
    //       } else {
    //         this.$message({
    //           type: 'error',
    //           message: message
    //         })
    //       }
    //     }).catch((error) => {
    //       console.log(error)
    //     })
    //     this.clearSelection()
    //   }).catch(() => {
    //     this.$message({
    //       type: 'info',
    //       message: '已取消删除'
    //     })
    //   })
    // },
    /**
     * 响应页面右侧列表 List 组件 双击列表项 时派发的 row-dblclick 事件回调
     *  - 当双击 List 组件 列表项, 会派发 row-dblclick 事件
     *  - 模板中该方法会执行：
     *    -- 打开 查看列表项信息表单 弹窗
     *    -- 将 查看列表项信息表单 清空
     *    -- 将之前双击的列表项数据 覆写 查看列表项信息表单绑定数据 model
     */
    handleCurrentChange(row) {
      this.dialogType = this.formPanel.look.type
      this.$nextTick(() => {
        this.$refs.lookForm && this.$refs.lookForm.resetFields()
        Object.keys(row).forEach(key => {
          this.$set(this.formPanel.look.model, key, row[key])
        })
      })
    },
    /**
     * 点击页面右侧列表中列表项最后一列 操作列中 编辑按钮 触发
     * - 模板中该方法会执行：
     *   -- 打开 编辑列表项信息表单 弹窗
     *   -- 根据列表项数据中 唯一标识（如 id）向后台发起请求，获取该列表项的最新数据
     *   -- 将最新的列表项数据 覆写 编辑列表项信息表单绑定数据 model
     */
    handleEdit(row) {
      this.dialogType = this.formPanel.edit.type
      this.$nextTick(() => {
        const params = {}
        params[this.idKey] = row[this.idKey]
        this.check(params)
          .then(({ success, message, data }) => {
            if (success) {
              this.$refs.editForm && this.$refs.editForm.resetFields()
              for (const key in this.formPanel.edit.model) {
                this.$set(this.formPanel.edit.model, key, data[key])
              }
            } else {
              this.$message({
                type: 'error',
                message
              })
            }
          })
          .catch(err => console.log(err))
      })
    },
    /**
     * 点击页面右侧列表中列表项最后一列 操作列中 删除按钮 触发
     * - 模板中该方法会执行：
     *    -- 提示是否要删除数据，否就返回
     *    -- 是则根据列表项数据中 唯一标识（如 id）向后台发起删除请求：
     *       ---- 删除请求发送成功，则提示删除成功信息，调用 tree 组件 refresh()，刷新左侧树
     *            删除请求发送失败则提示失败信息
     */
    handleDelete(row) {
      this.$confirm('此操作不能回退，确认要删除您选中的数据么?', '提示', {
        cancelButtonText: '取消',
        confirmButtonText: '确定',
        type: 'warning'
      })
        .then(() => {
          const params = {}
          params[this.delIdKey] = row[this.delIdKey]
          this.del(params)
            .then(({ success, message }) => {
              if (success) {
                this.load(1)
                this.$message({
                  type: 'success',
                  message: message
                })
                // 删除后 刷新本地 tree
                this.$refs.tree.refresh()
              } else {
                this.$message({
                  type: 'error',
                  message: message
                })
              }
            })
            .catch(error => {
              console.log(error)
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    /**
     * 响应页面右侧列表 List 组件 列表项勾选框 勾选时派发的 selection-change 事件回调
     *  - 当点击 List 组件 列表项的勾选框, 会派发 selection-change 事件
     *  - 模板中该方法拿到列表中已经勾选数据，并赋给 selectedList
     */
    handleSelectionChange(val) {
      this.selectedList = val
    },
    /**
     * 点击新增列表项信息表单 弹窗底部 保存并新增按钮 触发
     * - 模板中该方法会执行：
     *    -- 验证新增列表项信息表单内容
     *    -- 验证成功则将 新增列表项信息表单绑定数据 model 向后台发起新增请求：
     *       ---- 新增请求发送成功，则提示新增成功信息，调用 List 组件 load(1), 请求列表的分页数据；清空新增列表项信息表单，调用 tree 组件 refresh()，刷新左侧树
     *            新增请求发送失败则提示失败信息
     */
    handleSubmitAndAdd() {
      this.$refs.addForm.validate(valid => {
        if (valid) {
          this.add(this.formPanel.add.model).then(({ success, message }) => {
            if (success) {
              this.load(1)
              this.$message({
                type: 'success',
                message: message
              })
              this.$refs.addForm && this.$refs.addForm.resetFields()
              // 新增后操作 刷新
              this.$refs.tree.refresh()
            } else {
              this.$message({
                type: 'error',
                message: message
              })
            }
          })
        }
      })
    },
    /**
     * 点击新增列表项信息表单 弹窗底部 保存按钮 触发
     * - 模板中该方法会执行：
     *    -- 验证新增列表项信息表单内容
     *    -- 验证成功则将 新增列表项信息表单绑定数据 model 向后台发起新增请求：
     *       ---- 新增请求发送成功，则提示新增成功信息，调用 List 组件 load(1), 请求列表的分页数据；关闭弹窗；调用 tree 组件 refresh()，刷新左侧树；
     *            新增请求发送失败则提示失败信息
     */
    handleAddSubmit() {
      this.$refs.addForm.validate(valid => {
        if (valid) {
          this.add(this.formPanel.add.model).then(({ success, message }) => {
            if (success) {
              this.load(1)
              this.dialogType = ''
              this.$message({
                type: 'success',
                message: message
              })
              // 新增后操作 刷新
              this.$refs.tree.refresh()
            } else {
              this.$message({
                type: 'error',
                message: message
              })
            }
          })
        }
      })
    },
    /**
     * 点击编辑列表项信息表单 弹窗底部 保存按钮 触发
     * - 模板中该方法会执行：
     *    -- 验证 编辑列表项信息表单内容
     *    -- 验证成功则将 编辑列表项信息表单绑定数据 model 向后台发起更新请求：
     *       ---- 更新请求发送成功，则提示更新成功信息，调用 List 组件 load(), 请求列表的分页数据；关闭弹窗；调用 tree 组件 refresh()，刷新左侧树；
     *            更新请求发送失败则提示失败信息
     */
    handleEditSubmit() {
      this.$refs.editForm.validate(valid => {
        if (valid) {
          this.update(this.formPanel.edit.model).then(
            ({ success, message }) => {
              if (success) {
                this.load()
                this.dialogType = ''
                this.$message({
                  type: 'success',
                  message: message
                })
                // 编辑后 刷新本地 tree
                this.$refs.tree.refresh()
              } else {
                this.$message({
                  type: 'error',
                  message: message
                })
              }
            }
          )
        }
      })
    },
    /**
     * 点击弹窗 右上角 x 按钮 / 右下角取消按钮 触发，关闭弹窗
     */
    handleCancel() {
      this.dialogType = ''
    },
    /**
     * 响应页面列表右上方搜索输入框 键盘事件
     *
     * handleInputClick(ev, val) {
        // 输入完毕回车时
        // todo...
      },
    */
    handleInputClick(_ev, _val) {},
    /**
     * 渲染页面左侧 tree 组件 jsx 写法
     */
    // eslint-disable-next-line
    renderTree(h) {
      return (
        <Tree
          ref='tree'
          tree={this.tree}
          on-check-treeNode={this.handleNodeCheck}
          on-tree-empty={this.handleTreeEmpty}
          on-tree-subSelect={this.handleTreeSubSelect}
          on-tree-import={this.handleTreeImport}></Tree>
      )
    },
    /**
     * 渲染页面右侧 List 组件 jsx 写法
     */
    // eslint-disable-next-line
    renderList(h) {
      return (
        <div>
          {this.searchBtnList && this.searchBtnList.length > 0 ? (
            <SearchForm
              items={this.searchFields}
              props-model={this.searchModel}
              slot='searchPanel'
              ref='searchForm'>
              <ButtonList
                operateBtnList={this.searchBtnList}
                props-model={this.searchModel}></ButtonList>
            </SearchForm>
          ) : (
            ''
          )}
          <c-row class='toolPanel'>
            <c-col span={this.btnListWidthPercent}>
              <ButtonList operateBtnList={this.toolPanelBtnList} />
            </c-col>
            <c-col span={this.searchInputWidthPercent}>
              {this.showInputFlag ? (
                <c-input
                  class='search-input'
                  placeholder={this.inputPlaceholder}
                  size='small'
                  on-input={event => {
                    this.searchInput = event
                  }}
                  nativeOnKeydown={ev => {
                    ev.keyCode === 13
                      ? this.handleInputClick(ev, this.searchInput)
                      : null
                  }}>
                  <i
                    slot='suffix'
                    class='el-input__icon el-icon-search'
                    on-click={ev =>
                      this.handleInputClick(ev, this.searchInput)
                    }></i>
                </c-input>
              ) : (
                ''
              )}
            </c-col>
          </c-row>
          <c-list
            class='wrapList'
            dataSource={this.data}
            itemLayout={this.listItemLayout}
            pagination='pagination'
            renderItem={item => {
              return [
                <c-list-item slot='renderItem' slot-scope='item, index'>
                  {this.renderListTemplate(item)}
                  <ButtonList
                    class='listbtns'
                    operateBtnList={this.ListBtn}
                    props-model={item}
                  />
                </c-list-item>
              ]
            }}></c-list>
        </div>
      )
    },
    renderListTemplate(item) {
      return (
        <div>
          <c-list-item-meta>
            <c-avatar
              slot='avatar'
              style='background-color: #87d068'
              icon='el-icon-star-on'
            />
            <span slot='title'>{item.funName}</span>
            <span slot='description'>{item.funId}</span>
          </c-list-item-meta>
          <span>
            {item.location}&nbsp;&nbsp;{item.funType}&nbsp;&nbsp;{item.pid}
            &nbsp;&nbsp;{item.logFlag}&nbsp;&nbsp;{item.version}
          </span>
        </div>
      )
    },
    /**
     * 渲染页面弹窗 DialogForm 组件 jsx 写法
     */
    // eslint-disable-next-line
    renderDialogForm(h) {
      return this._l(this.formPanel, item => {
        return (
          <DialogForm
            width='660px'
            key={item.type}
            visible={this.dialogType === item.type}
            title={item.title}
            on-close={() => {
              this.dialogType = ''
            }}>
            <Form
              ref={item.ref}
              items={item.fields}
              inline={false}
              props-model={item.model}
              labelWidth={this.labelWidth}
              rules={item.rules}></Form>
            <c-form ref='form' slot='footer'>
              <c-form-item class='submit-btn'>
                <ButtonList operateBtnList={item.submitBtnList}></ButtonList>
              </c-form-item>
            </c-form>
          </DialogForm>
        )
      })
    },
    /**
     * 渲染页面自定义模板 jsx 写法（这里使用空白节点占位）
     */
    // eslint-disable-next-line
    renderCustom(h) {
      return this._e()
    }
    // /**
    //  * 渲染页面右侧顶部标题 jsx 写法（这里使用空白节点占位）
    // */
    // // eslint-disable-next-line
    // renderTableHeader(h) {
    //   return this._e()
    // }
  },
  render(h) {
    return (
      <div class='two-columns'>
        <div class='left'>{this.renderTree(h)}</div>
        <div class='right'>
          <div class='view-wrap-list clearfix'>
            {this.renderList(h)}
            {this.renderDialogForm(h)}
          </div>
        </div>
        {this.renderCustom(h)}
      </div>
    )
  },
  components: {
    CList,
    CListItem,
    CListItemMeta,
    SearchForm,
    DialogForm,
    Form,
    Tree,
    ButtonList,
    CAvatar
  }
}
</script>
<style lang="scss">
.treeList {
  .right {
    padding: 0 40px;
    box-sizing: border-box;
    .toolPanel {
      margin: 20px 0;
    }
    .listbtns {
      position: absolute;
      right: 0;
    }
  }
}
</style>
